import BaseGroup from '@/components/js/BaseGroup'
import { COMPONENT_TYPES } from '@/common/const-wb'
import { addEvent, removeEvent } from '@/plugins/dom'
import { getPxOVwByValue } from '@/store/utils'
import { EventBus } from '@/store/index'
export default class MenuByImgs extends BaseGroup {
  constructor() {
    super();
    //子类覆盖
    this.menuMap = null; //图片组件id: 打组显示组件id
    this.currentCompId = "";
    this.selectedCompId = "";
    this.offsetX = 0;
  }

  start() {
    // {"menuMap":{"e295610c-453a-425e-a056-44b876a0144e":"0ddb451b-b2e8-40c5-ace3-0c3cd416a3a5","b897cfa5-0cf7-4126-9f6e-c2c672707b17":"e192ee53-8b52-479d-b96e-99db6dec5092"},"currentCompId":"e295610c-453a-425e-a056-44b876a0144e","selectedCompId":"188ae5ae-37ad-493c-b9a1-aeb8f2e00867","offsetX":20}
    let menuMapObj = this.item.interactionData.injectJsClassObj
    if (menuMapObj) {
      this.currentCompId = menuMapObj.currentCompId;
      this.selectedCompId = menuMapObj.selectedCompId;
      this.offsetX = menuMapObj.offsetX;
      this.menuMap = menuMapObj.menuMap;
    }

    this.hiddenGroups();
    let displayCompId = this.menuMap[this.currentCompId];
    this.tabDisplayGroupByCompId(this.currentCompId, displayCompId);
    
    this.addClickEvent();
  }

  hiddenGroups() {
    _.forEach(this.menuMap, (compId) => {
      let groupCompData = this.componentMap[compId];
      this.store.commit("updateComponentAttr", {
        id: groupCompData.id,
        commonAttr: {
          isVisible: false
        }
      });
    })
  }

  addClickEvent() {
    _.forEach(this.components, (compData) => {
      let el
      if (compData.cid == COMPONENT_TYPES.wb_img) {
        el = compData.vueContainer.$refs.img;
      }else if(compData.cid == COMPONENT_TYPES.wb_btn){
        el = compData.vueContainer.$refs.btn.$el;
      }
      this.onImgClick = this.onImgClick.bind(this);
      addEvent(el, "click", this.onImgClick);
    })
  }

  onImgClick(e) {
    e.stopPropagation();
    let img = e.currentTarget;
    let compId = img.parentElement.id;
    let compData = this.componentMap[compId];
    const itemIndex = compData.commonAttr.itemIndex;
    this.hiddenGroups();

    if(compData.cid == COMPONENT_TYPES.wb_btn){
      EventBus.$emit("btnStatus", { isSelected: false, compId: this.selectedCompId });
      EventBus.$emit("btnStatus", { isSelected: true, compId });
      this.selectedCompId = compId
    }

    //需要显示打组组件
    let displayCompId = this.menuMap[compId];
    this.tabDisplayGroupByCompId(compId, displayCompId);

    let jumpUrl = 'menu_' + itemIndex
    let comType = "click"
    let wModule = "jump"
    this.onPostStatics(e, { comType, wModule,  jumpUrl })
  }

  tabDisplayGroupByCompId(tabCompId, displayCompId){
    let tabCompData = this.componentMap[tabCompId];

    if(this.selectedCompId){
      this.store.commit("updateComponentAttr", {
        id: this.selectedCompId,
        conStyles: { left: getPxOVwByValue(tabCompData.conAttr.left - this.offsetX) }
      });
    }else{
      this.selectedCompId = tabCompId
      EventBus.$emit("btnStatus", { isSelected: true, compId: tabCompId });
    }
    
    this.store.commit("updateComponentAttr", {
      id: displayCompId,
      commonAttr: {
        isVisible: true
      }
    });
  }

  destroy(){
    super.destroy();

    _.forEach(this.components, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_img) {
        let img = compData.vueContainer.$refs.img;
        removeEvent(img, "click", this.onImgClick);
      }
    })
  }
}
